<template>
  <div class="nav">
    <div class="btn">
      <div class="btn_1">
        <div class="qq">雪月</div>
        <div class="ww">
          <ul>
            <li style="color: #dadada">后台管理系统</li>
            <li class="ee">BACKROUND MANACEMENT CENTER</li>
          </ul>
        </div>
      </div>
      <div class="btn_2">
        <div class="ttt">
          <p class="italic">SIGN IN</p>
          <a href="" style="color: #2088ff">登录</a>
        </div>
        <el-form>
          <el-form-item>
            <el-input
              class="first"
              type="text"
              size="small"
              placeholder="请输入用户名"
              v-model="user.username"
            >
              <i slot="prefix" class="iconfont icon-morentouxiang">|</i>
            </el-input>
            <el-input
              class="secone"
              type="text"
              placeholder="请输入密码"
              size="small"
              v-model="user.password"
            >
              <i slot="prefix" class="iconfont icon-lock_fill">|</i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="but" type="primary" @click="gohome()"
              >登录</el-button
            >
            <input type="checkbox" />总是保持登录状态
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
        user:{
           username:"admin",
         password:123456,
        }
    }
  },
  methods:{
   async gohome(){
      let rst=await this.$http.post("login",this.user);
      console.log(rst);
      this.$local.set('token',rst.data.token)
      this.$router.replace("/home")
    }
  }
};
</script>

<style lang="less" scoped>
.nav {
  border: 1px solid red;
  height: 100%;
  background: url("../../assets/images/位图@2x.png");
  background-repeat: no-repeat;
  background-size: cover;

  .btn {
    width: 570px;
    height: 250px;
    // border: 1px solid red;
    margin: 0 auto;
    display: flex;
    margin-top: 240px;
    border-radius: 5%;
    overflow: hidden;
    .btn_1 {
      // opacity:0.1;
      flex: 3;
      // background-color: white;
      background-color: rgba(255, 255, 255, 0.2);

      .qq {
        font-size: 30px;
        font-weight: 500;
        color: #2088ff;
        padding: 20px;
      }
      .ww {
        margin-top: 100px;
        margin-left: 20px;
        ul {
          .ee {
            color: #999990;
            font-size: 10px;
            margin-top: 10px;
          }
        }
      }
    }
    .btn_2 {
      flex: 2;
      background-color: white;

      .ttt {
        margin-left: 100px;
        display: flex;
        .italic {
          margin-top: 15px;
          font-style: italic;
          color: #999999;
          font-size: 10px;
        }
        a {
          margin-top: 7px;
          font-size: 20px;
          margin-left: 15px;
        }
      }
      .iconfont {
        font-size: 23px;
      }
    }
  }
  .first {
    margin-left: 15px;
    width: 200px;
    margin-top: 20px;
    overflow: hidden;
    // border-radius: 20px;
  }
  .secone {
    margin-left: 15px;
    width: 200px;
    // margin-top: 30px;
    overflow: hidden;
    // border-radius: 20px;
  }
  .but {
    width: 200px;
    margin-left: 15px;
    border-radius: 20px;
    //  margin-top: 20px;
  }
}
</style>